<template>
  <div class="app-main-container">
    <div class="app-main-title">{{ title }}</div>
    <div class="doumee-filter">
      <el-select v-model="filters.checkedStatus" :placeholder="$t('message.xzsyzt')">
        <el-option
          v-for="item in openStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button v-preventReClick type="primary" @click="$message.info(this.$t('message.qxbz'))">{{ $t('message.cz') }}</el-button>
      <el-button v-preventReClick @click="filters = {}">{{ $t('message.clear') }}</el-button>
      <el-button type="primary" @click="$message.info(this.$t('message.qxbz'))">{{ $t('message.add') }}</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >

      <el-table-column align="center" :label="title + 'ID'" prop="code" width="200" />
      <el-table-column align="center" :label="title + $t('message.mc')" prop="name" width="200">
        <template slot-scope="scope">
          <span>{{ title + scope.row.name }}</span>
        </template></el-table-column>
      <el-table-column align="center" :label="$t('message.status')" width="200">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="'1'"
            :inactive-value="'0'"
            disabled
            @change="toConfigUpdate($event, scope.row.id, scope.row.status)"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('message.glcd')" prop="areaName" width="200" />
      <el-table-column :label="$t('message.caozuo')" align="center">
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button type="text" @click="$message.info(this.$t('message.qxbz'))">{{ $t('message.edit') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex-cc doumee-pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalCount"
        @current-change="getDevice"
      />
    </div>

  </div>
</template>

<script>
import { deviceList, deviceStatusChange } from '@/api'
import { parseTime } from '@/utils'
export default {
  name: 'Deviceb',
  data() {
    return {
      swiperOptions: {
        slidesPerView: 'auto',
        pagination: {
          el: '.swiper-pagination'
        }
      },
      dialogTableVisible: false,
      page: 1,
      totalCount: 10,
      list: [],
      listLoading: true,
      openStatus: [
        { value: '', label: this.$t('message.qb') },
        { value: '1', label: this.$t('message.zcsy') },
        { value: '0', label: this.$t('message.ty') }
      ],
      deviceStatus: [
        { value: '1', label: this.$t('message.qy') },
        { value: '0', label: this.$t('message.jy') }
      ],
      areaList: [],
      filters: {
        checkedStatus: null
      },
      newDevice: {
        id: null,
        name: null,
        code: null,
        areaId: null,
        status: null
      },
      title: ''
    }
  },
  created() {
    this.listLoading = false
    this.title = this.$route.meta.title.substring(0, this.$route.meta.title.length - 2)
  },
  methods: {
    toConfigUpdate(e, id, status) {
      deviceStatusChange({ param: { id, status }}, sessionStorage.getItem('venueId')).then(res => {
        console.log(res)
        this.getAreaList()
      }).catch(err => {
        console.log(err)
        this.getAreaList()
      })
    },
    getDevice() {
      deviceList({
        pagination: {
          firstQueryTime: parseTime(new Date()),
          page: this.page,
          rows: 10
        },
        param: {
          venueId: sessionStorage.getItem('venueId'),
          //  shopId
          status: this.filters.checkedStatus
        }
      }, sessionStorage.getItem('venueId')).then(res => {
        console.log('-----', res)
        if (res.errorCode === '000000') {
          // this.totalCount = res.totalCount
          const t = res.totalCount / 10
          const count = Number(t.toFixed(0)) + (t - t.toFixed(0) > 0 ? 1 : 0)
          this.totalCount = count * 10
          this.list = res.recordList
        }
      }).catch(err => {
        console.log('-----', err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.footer-style {
  display: flex;
  justify-content: space-between;
  background-color: #f2f2f2;
  margin: -10px -20px -30px;
  height: 50px;
  .bottom-left {
    margin-left: 20px;
    height: 20px;
    margin-top: 15px;
    .sum-title-style {
      font-size: 15px;
      color: #222;
    }
    .sum-pay-value-style {
      font-size: 17px;
      font-weight: 500;
      color: #DD0707;
    }
    .dis-title-style {
      font-size: 14px;
      color: #222;
    }
    .discoun-style {
      font-size: 16px;
      color: #DD0707;
    }
  }
  .bottom-right {
    margin-right: 20px;
    margin-top: 10px;
    height: 30px;
    .pay-action-style {
      width: 100px;
      height: 30px;
      font-size: 15px;
      line-height: 1px;
      vertical-align: middle
    }
  }
}

</style>
